import React, { useState } from 'react'
import './styleTool.scss'
import { DownOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown } from 'antd';
function DropDownTool() {

    const items: MenuProps['items'] = [
        {
            key: 1,
            label: (
                <ul className="main-category">
                    <li style={{ fontSize: '16px' }}>
                        <b style={{ fontSize: "20px" }}>  营销推广</b>

                        <ul className="sub-items">
                            <li>海报</li>
                            <li>传单</li>
                            <li>长图</li>
                            <li>宣传册</li>
                            <li>易拉宝</li>
                            <li>logo</li>
                            <li>通知公告</li>
                            <li>画册</li>
                            <li>网页</li>
                        </ul>
                    </li>
                    <li style={{ fontSize: '16px' }}>
                        <b style={{ fontSize: "20px" }}>  社交媒体</b>
                        <ul className="sub-items">
                            <li>小红书</li>
                            <li>公众号</li>
                            <li>社群发圈</li>
                            <li>日签</li>
                            <li>朋友圈</li>
                            <li>二维码</li>
                            <li>头像</li>
                            <li>拼图</li>
                            <li>视频创作</li>
                            <li>祝福问候</li>
                        </ul>
                    </li>
                    <li style={{ fontSize: '16px' }}>
                        <b style={{ fontSize: "20px" }}>  学习办公</b>
                        <ul className="sub-items">
                            <li>名片</li>
                            <li>PPT</li>
                            <li>工作证</li>
                            <li>证件照</li>
                            <li>报告</li>
                            <li>图表</li>
                            <li>总结报告</li>

                        </ul>
                    </li>
                    <li style={{ fontSize: '16px' }}>
                        <b style={{ fontSize: "20px" }}>  电商产品</b>
                        <ul className="sub-items">
                            <li>电商Banner</li>
                            <li>产品主题</li>
                            <li>图标</li>
                            <li>店招</li>
                            <li>优惠券</li>
                            <li>会员卡</li>
                            <li>直播贴片</li>
                            <li>邀请函</li>
                            <li>红包封面</li>
                        </ul>
                    </li>
                    <li style={{ fontSize: '16px' }}>
                        <b style={{ fontSize: "20px" }}>  教育培训</b>
                        <ul className="sub-items">
                            <li>简历</li>
                            <li>展板</li>
                            <li>贺卡</li>
                            <li>课程推广</li>
                            <li>书籍封面</li>
                            <li>壁纸</li>
                            <li>手账</li>
                            <li>课程表</li>
                            <li>手抄报</li>
                        </ul>
                    </li>
                    <li style={{ fontSize: '16px' }}>
                        <b style={{ fontSize: "20px", color: '#2254f4' }}>  素材下载</b>
                        <ul className="sub-items">
                            <li>AI素材</li>
                            <li>视频模板素材</li>
                            <li>视频素材</li>
                            <li>免版素材</li>
                            <li>图片素材</li>
                            <li>平面模板素材</li>

                        </ul>
                    </li>
                </ul>
            ),
        },

    ];
    const items2: MenuProps['items'] = [
        {
            key: 1,
            label: (
                <ul className="main-category">

                    <li style={{ fontSize: '16px' }}>
                        <b style={{ fontSize: "20px" }}>  在线设计</b>
                        <ul className="sub-items">
                            <li>海报设计</li>
                            <li>简历设计</li>
                            <li>名片设计</li>
                            <li>封面设计</li>
                            <li>邀请函设计</li>
                            <li>PPT设计</li>
                            <li>Banner设计</li>
                            <li>头像设计</li>
                            <li>小红书封面设计</li>
                            <li>公众号封面设计</li>
                        </ul>
                    </li>
                    <li style={{ fontSize: '16px' }}>
                        <b style={{ fontSize: "20px" }}>  印刷物料</b>
                        <ul className="sub-items">
                            <li>名片设计</li>
                            <li>菜单菜谱</li>
                            <li>宣传单设计</li>
                            <li>工作证设计</li>
                            <li>证书</li>
                            <li>台历</li>
                            <li>明信片</li>
                            <li>奖状模板设计</li>
                        </ul>
                    </li>


                    <li style={{ fontSize: '16px' }}>
                        <b style={{ fontSize: "20px" }}>  行业资源</b>
                        <ul className="sub-items">
                            <li>企业行政</li>
                            <li>金融保险</li>
                            <li>教育培训</li>
                            <li>门店运营</li>
                            <li>文体娱乐</li>
                            <li>电商</li>
                            <li>个人生活</li>
                        </ul>
                    </li>
                </ul>
            ),
        },

    ];
    const items3: MenuProps['items'] = [
        {
            key: 1,
            label: (
                <ul className="main-category">

                    <li style={{ fontSize: '16px' }}>
                        <b style={{ fontSize: "20px", color: '#2254f4' }}>  稿定AI</b>
                        <ul className="sub-items">
                            <li>智能设计</li>
                            <li>灵感绘图</li>
                            <li>AI素材生成</li>
                            <li>AI文案生成</li>
                        </ul>
                    </li>
                    <li style={{ fontSize: '16px' }}>
                        <b style={{ fontSize: "20px" }}>  图片处理</b>
                        <ul className="sub-items">
                            <li>AI抠图</li>
                            <li>在线拼图</li>
                            <li>图片编辑</li>
                            <li>AI滤镜</li>
                            <li>AI变清晰</li>
                            <li>AI扩图</li>
                            <li>证件照</li>
                            <li>AI背景</li>
                            <li>图片压缩</li>
                            <li>去水印</li>
                        </ul>
                    </li>


                    <li style={{ fontSize: '16px' }}>
                        <b style={{ fontSize: "20px", color: '#2254f4' }}>  设计工具</b>
                        <ul className="sub-items">
                            <li>创建画布</li>
                            <li>图片编辑</li>
                            <li>H5页面制作</li>
                            <li>视频剪辑</li>
                            <li>图文创作</li>
                        </ul>
                    </li>
                </ul>
            ),
        },

    ];

    const items4: MenuProps['items'] = [
        {
            key: 1,
            label: (
                <ul className="main-category">

                    <li style={{ fontSize: '16px' }}>
                        <b style={{ fontSize: "20px" }}>  热门功能</b>
                        <ul className="sub-items">
                            <li>在线抠图</li>
                            <li>在线拼图</li>
                            <li>图片编辑</li>
                            <li>视频剪辑</li>
                            <li>智能设计</li>
                            <li>系统定制</li>
                        </ul>
                    </li>
                    <li style={{ fontSize: '16px' }}>
                        <b style={{ fontSize: "20px" }}>  企业协同</b>
                        <ul className="sub-items">
                            <li>创意供给</li>
                            <li>内容生产</li>
                            <li>资产管理</li>
                            <li>营销应用</li>
                            <li>效果监控</li>
                        </ul>
                    </li>


                    <li style={{ fontSize: '16px' }}>
                        <b style={{ fontSize: "20px" }}>  设计资源</b>
                        <ul className="sub-items">
                            <li>开放平台</li>
                            <li>设计专题</li>
                            <li>帮助中心</li>
                        </ul>
                    </li>
                </ul>
            ),
        },

    ];

    return (
        <div
            className="dropdown-container"

        >
            {/* 触发区域 - 可以是任意内容 */}
            <div className="trigger-area">
                <Dropdown menu={{ items }} className='drop-down'>
                    <a onClick={(e) => e.preventDefault()}>

                        模板素材
                        <DownOutlined style={{ fontSize: '12px' }} />

                    </a>
                </Dropdown>
                <Dropdown menu={{ items: items2 }} className='drop-down'>
                    <a onClick={(e) => e.preventDefault()}>

                        设计场景
                        <DownOutlined style={{ fontSize: '12px' }} />

                    </a>
                </Dropdown>
                <Dropdown menu={{ items: items3 }} className='drop-down'>
                    <a onClick={(e) => e.preventDefault()}>

                        工具推荐
                        <DownOutlined style={{ fontSize: '12px' }} />

                    </a>
                </Dropdown>
                <Dropdown menu={{ items: items4 }} className='drop-down'>
                    <a onClick={(e) => e.preventDefault()}>

                        资源教程
                        <DownOutlined style={{ fontSize: '12px' }} />

                    </a>
                </Dropdown>
            </div>


        </div>
    )
}

export default DropDownTool